<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
	<meta name="format-detection" content="telephone=no, email=no"/>
	<meta charset="UTF-8">
	<title>商品搜索</title>
	<link rel="stylesheet" href="themes/css/core.css">
	<link rel="stylesheet" href="themes/css/icon.css">
	<link rel="stylesheet" href="themes/css/home.css">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
	<script src="themes/js/vue.js"></script>
	<script src="themes/js/jquery.min.js"></script>
</head>
<body>

<div id="el">
	<header class="aui-header-default aui-header-fixed ">
		<a href="#" class="aui-header-item">
			<i class="aui-icon aui-icon-back"></i>
		</a>
		<div class="aui-header-center aui-header-center-clear">
			<div class="aui-header-search-box">
				<i class="aui-icon aui-icon-small-search"></i>
				<form action="my-products-class.html" οnsubmit="return searchData();">
				<input type="search" name="productSearch"  v-model="ziduaninfo"  placeholder="搜索功能" class="aui-header-search" />
				</form>
			</div>
		</div>
		<a href="#" class="aui-header-item-icon">
			<i class="aui-icon aui-icon-packet"></i>
			<i class="aui-icon aui-icon-member"></i>
		</a>
	</header>
	<section class="aui-new-search-content">
		<div class="aui-new-search-tab">
			<ul>
				<li>
					<a href="javascript:;" :class="clacss.zonghe" @click="zonghe">综合</a>
				</li>
				<li>
					<a href="javascript:;" :class="clacss.xiaoliang" @click="xiaoliang">销量</a>
				</li>
				<li>
					<a href="javascript:;" :class="clacss.jiage" @click="jiage">价格</a>
				</li>
				<li>
					<a href="javascript:;" :class="clacss.xingping" @click="xingping">新品</a>
				</li>
			</ul>
		</div>
	</section>
	<section class="aui-list-product">
		<div class="aui-list-product-float-item" v-html="xuanraninfo">
			<a href="javascript:;" class="aui-list-product-fl-item">
				<div class="aui-list-product-fl-img">
					<img src="themes/img/pd/sf-11.jpg" alt="">
				</div>
				<div class="aui-list-product-fl-text">
					<h3 class="aui-list-product-fl-title">2016夏天新款男士短袖t恤青少年韩版修身印花圆领半袖男装衣服潮领半袖男装衣服潮领半袖男装衣服潮</h3>
					<div class="aui-list-product-fl-mes">
						<div>
							<span class="aui-list-product-item-price">
								<em>¥</em>
								399.99
							</span>
							<span class="aui-list-product-item-del-price">
								¥495.65
							</span>
						</div>
						<div class="aui-btn-purchase">
							99%好评
						</div>

					</div>
					<div class="aui-list-self-sell">
						<span class="aui-self-sell">自营</span>
						<em class="aui-self-sell-em">247800条评价</em>
					</div>

				</div>
			</a>
		</div>
	</section>
</div>
<script>
		function setData(){
			console.log('enter 触发！');
			return false;//一定要返回false，告诉表单不要跳转
		}
var vu=new Vue({
	el:"#el",
	data:{
      clacss:{
      	zonghe:"aui-active",
		  xiaoliang:"",
		  jiage:"",
		  xingping:"",
	  },
		ziduan:"",
		detailziduaninfo:"",
		ziduaninfo:"",
		xuanraninfo:""

	},
	created:function(){
          this.zonghe();
	},
	methods:{
		zonghe:function(){
           this.clacss.zonghe="aui-active";
           this.clacss.jiage="";
				   this.clacss.xiaoliang="";
				   this.clacss.xingping="";
			var _this=this;
			this.ziduan=window.location.search.substr(1).split("=")[0];
			console.log(window.location.href)
			console.log(this.ziduan)
			var info=window.location.search.substr(1).split("=")[1].split("#")[0];
			console.log(info)
            var dat={};
			if(this.ziduan=="productSearch"){
				this.ziduaninfo=decodeURI(info);
				dat={productSearch:this.ziduaninfo.trim()}
			}else{
				this.detailziduaninfo=parseInt(info);
				dat={productTypeid:this.detailziduaninfo}
			}
           $.ajax({
			   url:"/weixin/shop/queryProductByXiaoliang",
			   data:dat,
			   dataType:"json",
			   type:"get",
			   success:function (data) {
              if(data.li!=null){
                   _this.xuanran(data.li)
			  }
			   }
		   })
		},
		jiage:function(){
			this.clacss.zonghe="";
			this.clacss.jiage="aui-active";
					this.clacss.xiaoliang="";
					this.clacss.xingping="";
			if(this.ziduan=="productSearch"){
				dat={productSearch:this.ziduaninfo.trim()}
			}else{
				dat={productTypeid:this.detailziduaninfo}
			}
			var _this=this;
			$.ajax({
				url:"/weixin/shop/queryProductByJiaGe",
				data:dat,
				dataType:"json",
				type:"get",
				success:function (data) {
					if(data.li!=null){
						_this.xuanran(data.li)
					}
				}
			})

		},
		xiaoliang:function(){
			this.clacss.zonghe="";
			this.clacss.jiage="",
					this.clacss.xiaoliang="aui-active",
					this.clacss.xingping="";
			var dat={};
			var _this=this;
			if(this.ziduan=="productSearch"){
				dat={productSearch:this.ziduaninfo.trim()}
			}else{
				dat={productTypeid:this.detailziduaninfo}
			}
			$.ajax({
				url:"/weixin/shop/queryProductByXiaoliang",
				data:dat,
				dataType:"json",
				type:"get",
				success:function (data) {
					if(data.li!=null){
						_this.xuanran(data.li)
					}
				}
			})
		},
		xingping:function () {
			this.clacss.zonghe="";
			this.clacss.jiage="";
			this.clacss.xiaoliang="";
			this.clacss.xingping="aui-active";
			var _this=this;
			if(this.ziduan=="productSearch"){
				dat={productSearch:this.ziduaninfo.trim()}
			}else{
				dat={productTypeid:this.detailziduaninfo}
			}
			$.ajax({
				url:"/weixin/shop/queryProductByXingPing",
				data:dat,
				dataType:"json",
				type:"get",
				success:function (data) {
					if(data.li!=null){
						_this.xuanran(data.li)
					}
				}
			})
		},
		xuanran:function(li){
			var str="";
			console.log("nihao"+li.length)
			for(var i=0;i<li.length;i++){
	str=str+`<a href="ui-product.html?productId=${li[i].productId}" class="aui-list-product-fl-item">
						<div class="aui-list-product-fl-img">
						<img src="${li[i].productImg}" alt="">
						</div>
						<div class="aui-list-product-fl-text">
						<h3 class="aui-list-product-fl-title">${li[i].productDesc}</h3>
				<div class="aui-list-product-fl-mes">
						<div>
						<span class="aui-list-product-item-price">
						<em>¥</em>
				${li[i].promotionPrice}
				</span>
				<span class="aui-list-product-item-del-price">
						¥${li[i].productPrice}
				</span>
				</div>
				</div>
				<div class="aui-list-self-sell">
						<span>${li[i].business.businessName}</span>
						<em >${li[i].productSales}件已售</em>
				</div>
				</div>
				</a>`
			}
			this.xuanraninfo=str;
		}
	},
 computed:{

 }

})
</script>
</body>
</html>